import { useState } from 'react';
import { Menu } from 'antd';
const { SubMenu } = Menu;
import { withRouter } from 'react-router-dom';

import logoImg from '@assets/images/logo.png';
import bg1Img from '@assets/images/bg1.jpg';
import './index.less';

function HaloHeader(props) {
    const [menu, useMenu] = useState('');

    const changeMenu = e => {
        props.history.push(e.key);
    };

    return (
        <div className="halo-header">
            <header className="home-hd">
                <div>
                    <img
                        className="logo-img"
                        src={logoImg}
                        onClick={changeMenu.bind(this, { key: 'home' })}
                    ></img>
                </div>
                <Menu
                    mode="horizontal"
                    onClick={changeMenu}
                    className="hd-menu"
                    theme="dark"
                    selectedKeys={[menu]}
                >
                    <SubMenu title="WALLET" className="menu-item" key="WALLET">
                        <Menu.Item className="menu-item-sub" key="META">
                            META
                        </Menu.Item>
                    </SubMenu>
                    <Menu.Item key="EXPLORER">EXPLORER</Menu.Item>
                    <Menu.Item key="bridge">HALO BRIDGE</Menu.Item>
                    <Menu.Item key="genesis">HALO GENESIS</Menu.Item>
                    <Menu.Item key="WHITEPAPER">WHITEPAPER</Menu.Item>
                </Menu>
            </header>
            <img className="bg1-img" src={bg1Img}></img>
        </div>
    );
}

export default withRouter(HaloHeader);
